<template>
  <el-container style="min-height: 100vh">
    <!-- 左侧 -->
    <left-component></left-component>
    <el-container style="flex-direction: column;">
      <!-- 头部 -->
      <header-component></header-component>
      <el-main>
        <!--下面这个div盒子是搜索框和搜索按钮 -->
        <!-- <div style="margin: 10px 0">
          <el-input style="width: 200px" placeholder="请输入名称" suffix-icon="el-icon-search"></el-input>
            <el-button class="ml-5" type="primary">搜索</el-button>
        </div> -->

        <!--  下面这个div盒子是新增、批量删除、导入导出按钮的  -->
        <div class="pageTitleWrap">
          <div class="pageTitle">人员列表</div>
          <el-button type="primary" @click="dialogFormVisible = true">新增人员</el-button>
        </div>

        <el-table :data="tableData" border stripe: header-cell-class-name="headerBg">
          <el-table-column prop="date" label="人员名称" width="240" align="center">
          </el-table-column>
          <!-- 表格里面添加编辑和删除的按钮  -->
          <el-table-column label="操作" align="center">
            <template v-slot="scope">
              <el-button type="danger">删除</el-button>
            </template>
          </el-table-column>


        </el-table>
        <!--下边这个div盒子是添加进来可以分页的代码 -->
        <div style="padding: 10px 0">
          <el-pagination :page-sizes="[5, 10, 15, 20]" :page-size="10" layout="total, sizes, prev, pager, next, jumper"
            :total="10">
          </el-pagination>
        </div>
      </el-main>
    </el-container>
    <!-- 新增用户 -->
    <el-dialog title="新增人员" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <!-- <div class="tanTitle">新增用户之后,需要再boss进行授权才可以使用。</div> -->
        <el-form-item label="名称:" :label-width="formLabelWidth">
          <el-input v-model="form.companyUserAddDTO" placeholder="请输入人员名称" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveBtn">保 存</el-button>
      </div>
    </el-dialog>
  </el-container>
  
</template>

<script>
import {
  whiteListCompanyShowCompanyUserApi, //公司人员列表
  whiteListCompanyUserAddApi, //添加公司人员
  whiteListCompanyDeleteApi //删除公司人员
} from "@/api/api";
import HeaderComponent from '@/components/header.vue'
import LeftComponent from '@/components/left.vue'

export default {
  name: 'userList',
  components: {
    'header-component': HeaderComponent,
    'left-component': LeftComponent
  },
  data() {
    const item = {
      date: '1',
      name: '正常待授权',
      address: '上海市普陀区金沙江路 1518 弄'
    };
    return {
      tableData: Array(5).fill(item),
      collapseBtnClass: 'el-icon-s-fold',
      sideWidth: 200, //动态收缩导航栏初始值200
      logoTextShow: true,
      headerBg: 'headerBg',
      dialogFormVisible: false,
      current: 1,//当前页
      pageSize: 10,//分页大小
      form: {
        companyUserAddDTO: ''
        },
        formLabelWidth: '80px'
    }
  },
  mounted: function () {
    this.whiteListCompanyShowCompanyUserFun() //公司人员列表
  },
  methods: {
    // 获取任务列表
    whiteListCompanyShowCompanyUserFun() {
      let param = {
        current: this.current,//当前页
        pageSize: this.pageSize //分页大小
      }
      whiteListCompanyShowCompanyUserApi(param).then(res => {
        console.log('获取公司人员列表')
        console.log(res)
        if (res.success) {

        } else {
          // this.$message.error(res.errorMessage);          
        }
      })
    },
     // 添加公司人员
     saveBtn(){
      console.log('添加公司人员-点击保存')
      if(this.form.companyUserAddDTO.trim()===''){
        this.$message({
          message: '请将信息填写完整！',
          type: 'warning'
        });
        return
      }
      console.log(this.form)
      whiteListCompanyUserAddApi(this.form).then(res=>{
        console.log('添加公司人员-保存结果---')
        console.log(res)
      })
    }
  }
}
</script>

<!--顶部的横栏颜色定义-->
<style>
.headerBg {
  background: #ccc !important;
}

.el-menu-item-group__title {
  padding: 0 0 0 0;
}
</style>